<template>
  <div>
    <table>
      <caption>
        <h2>欢迎光临vue开发的收银系统-水果店</h2>
      </caption>
      <tr>
        <td>苹果10元/斤,折扣<8折></td>
      </tr>
      <tr>
        <td>输入您要购买的斤数 <input type="text" v-model.number="num" /></td>
      </tr>
      <tr>
        <td><button @click="calFn">结账买单</button></td>
      </tr>
      <tr>
        <td>
          结账单:总价: <i v-html="total"> {{ num * 10 }} </i>元 折后价:<i
            v-html="zhe"
            >{{ num * 10 * 0.8 }}</i
          >元 省了:<i v-html="save">{{ num * 10 * 0.2 }}</i
          >元
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: "",
      total: "",
      zhe: "",
      save: "",
    };
  },
  methods: {
    calFn() {
      this.total = this.num * 10;
      this.zhe = this.num * 10 * 0.8;
      this.save = this.num * 10 * 0.2;
    },
  },
};
</script>

<style lang="less">
table {
  width: 600px;
  border: 1px solid #000;
  border-spacing: 0rem;
  td {
    text-align: center;
    border: 1px solid #000;
  }
}
i {
  font-style: normal;
}
</style>
